import { onMounted,onUnmounted } from "vue" 
import type { Ref } from "vue" 

const useClickoutSide = (elementRef:Ref<HTMLElement | undefined>, callBack:(e:MouseEvent)=>void )=>{
    let handler = (e:MouseEvent) =>{
        if(elementRef.value && e.target) {
            if(!elementRef.value.contains(e.target as HTMLElement)){
                callBack(e)
           
            }
        }
    }
    onMounted(()=>{
        document.addEventListener('click',handler)
    })
    onUnmounted(()=>[
        document.removeEventListener('click',handler)
    ])
}
export default useClickoutSide